<template>
	<view class="w-670">
		<view class="bg-img ">
			<image src="../static/fund/picture_rexiaojijinbang@2x.png" mode=""></image>
			<view class="bg-text bg-item text-center">
				<view class="fs-32 text-bold text-white padding-top">雨点金融，与您协手金色未来</view>
				<view class="fs-24 text-white padding-top">财富人生，您我同行</view>
			</view>
		</view>
		<view class="section ">大家都在买</view>

		<template v-for="(item,index) in fhd">
			<navigator :url="'../t-fundDetail/t-fundDetail?code='+item.code">
				<view class="main flex padding-top" :key='index'>
					<view class="m-img  flex align-center">
						<image v-if="index==0" src="../static/fund/icon_rexiaojijinbang_douzaimai1@2x.png" mode="">
						</image>
						<image v-else-if="index==1" src="../static/fund/icon_rexiaojijinbang_douzaimai2@2x.png" mode="">
						</image>
						<image v-else-if="index==2" src="../static/fund/icon_rexiaojijinbang_douzaimai3@2x.png" mode="">
						</image>
						<view v-else class="m-round text-center">{{index+1}}</view>
					</view>
					<view class="flex m-right  justify-between align-center">
						<view class=" basis-lg">
							<view class="fs-32 text-bold m-title">{{item.name}}</view>
							<view class="fs-24 color-d1 pd-t">产业转型升级·每日限额</view>
						</view>
						<view class=" text-right basis-sm margin-right-sm">
							<view class="text-red fs-40 text-bold">{{item.lastThreeMonthsGrowth}}%</view>
							<view class="fs-24 color-d1 pd-t">近一年收益率</view>
						</view>
						<navigator url="" class="cuIcon-right text-bold"></navigator>
					</view>
				</view>
			</navigator>
		</template>
		<view class="footer text-center">基金销售服务由北京小雨点基金销售有限公司及各基金管理公司提供历史业绩比戴白哦未来表现，市场有风险，投资需谨慎</view>

	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from 'vuex';
	const {
		mapActions,
		mapState
	} = createNamespacedHelpers('product')
	export default {
		data() {
			return {
				list: [{
						name: '雨点高端制造股票A类',
						poster: '产业转型升级·每日限额',
						per: '185.23%'
					},
					{
						name: '雨点高端制造股票A类',
						poster: '产业转型升级·每日限额',
						per: '185.23%'
					},
					{
						name: '雨点高端制造股票A类',
						poster: '产业转型升级·每日限额',
						per: '185.23%'
					},
					{
						name: '雨点高端制造股票A类',
						poster: '产业转型升级·每日限额',
						per: '185.23%'
					}, {
						name: '雨点高端制造股票A类',
						poster: '产业转型升级·每日限额',
						per: '185.23%'
					}, {
						name: '雨点高端制造股票A类',
						poster: '产业转型升级·每日限额',
						per: '185.23%'
					}, {
						name: '雨点高端制造股票A类',
						poster: '产业转型升级·每日限额',
						per: '185.23%'
					}, {
						name: '雨点高端制造股票A类',
						poster: '产业转型升级·每日限额',
						per: '185.23%'
					}
				]

			}
		},
		computed: {
			...mapState(['fhd']),
		},
		methods: {
			...mapActions(['getFundht']),
		},
		onLoad() {
			this.getFundht()
		}
	}
</script>
<style scoped>
	page {
		background-color: #FFFFFF;
	}
</style>

<style scoped lang="scss">
	.color-d1 {
		color: #D1D1D1;
	}

	.color-f3 {
		color: #FF3A3A;
	}

	.fs-40 {
		font-size: 40rpx;
	}

	.pd-t {
		padding-top: 10rpx;
	}

	.bg-img {
		height: 190rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}

		.bg-item {
			display: flex;
			flex-direction: column;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
		}

	}

	.section {
		margin-top: 48rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #161616;

	}

	.main {
		.m-img {
			width: 10%;
			align-self: stretch;

			image {
				width: 52rpx;
				height: 76rpx;
			}

			.m-round {
				width: 48rpx;
				height: 48rpx;
				line-height: 48rpx;
				background: #A8CEF8;
				color: white;
				border-radius: 24px;
			}
		}

		.m-right {
			width: 90%;

			.m-title{
				width: 340rpx;
				 white-space: nowrap;
				    overflow: hidden;
				    text-overflow: ellipsis;
			}
		}


	}

	.footer {
		padding-top: 50rpx;
		width: 600rpx;
		font-size: 20rpx;
		font-weight: 300;
		color: #BEBEBE;

	}
</style>
